<template>
	<view >
		<scroll-view scroll-y="true" style="height: calc(100vh - 350rpx);" >
			<view class="communication-report-two">				
				<textarea row='3' class="text-area" placeholder="汇报内容(选填)"/>
				<view class='server-view'>
						<view class='left' @click="takePhoto">
							<view class='img-c'>
								<img src='../../../../static/icon/19.png' alt="1" />
							</view>
							<view>点击拍照或录像</view>
						</view>
						<view class='right' @click="takeRadio">
							<view class='img-c'>
								<img src='../../../../static/icon/20.png' alt="1" />
							</view>
							<view>点击开始录音，再点击停止</view>
						</view>
				</view>
				<view class="view-img">
					<view class="view-img-item" v-for="(item,i) in upImgList" :key='i'>
						<img src='../../../../static/menu/13.png' alt="1" />
						<img class='close-icon' src='../../../../static/icon/22.png' alt="1" />
					</view>
				</view>
			
				<view class="view-audio">			
					<view class="view-audio-item" v-for="(item,i) in upImgList" :key='i'>
						<view class="au-icon">
							<img class='close-icon' src='../../../../static/icon/17.png' alt="1" />
						</view>
						<view class="au-name">
							adsadascxzc.name
						</view>
						<view class="au-close-icon">
							<img class='close-icon' src='../../../../static/icon/22.png' alt="1" />
						</view>
					</view>				
				</view> 
		</view>
		</scroll-view>
		<view class="botton-btn-st" >
			<button type="primary" @click="send" >发送</button>
		</view>
	</view>
</template>

<script>
	import {
		createCommunicate
	} from '@/api/operationPicket.js'
	const recorderManager = uni.getRecorderManager();
	export default {
	    data() {
	        return {
				upImgList: [{},{},{}],
				content:'',
				path:[],
				clickTimes: 0,
				textRadio: '点击开始录音，再点击停止',
	        }
	    },
		props:{
			dataInfo:{
				type:Object
			}
		},
	    methods: {
			// 拍照
			takePhoto() {
			    const ctx = plus.camera.getCamera();
				const res = ctx.supportedImageResolutions[0];
				const fmt = ctx.supportedImageFormats[0];
				console.log("Resolution: "+res+", Format: "+fmt);
				ctx.captureImage( function( path ){
					   this.path.push(path)
						console.log( "Capture image success: " + path );  
					},
					function( error ) {
						console.log( "Capture image failed: " + error.message );
					},
					{resolution:res,format:fmt}
				);
			},
			// 录音
			takeRadio() {
				const _that = this
				_that.clickTimes++
				console.log(_that.clickTimes % 2 + '==================================')
				if (_that.clickTimes % 2 === 1) {
					_that.textRadio='录音开始'
					recorderManager.start({
						format: "mp3"
					});
					return
				}
				_that.textRadio='录音结束 '
				recorderManager.stop();
				recorderManager.onStop((tempFilePath)=>{
					 this.path.push(tempFilePath)
				})
			},
	       send(){
			   const {otId,otTypeId,companyId} = this.dataInfo
			   createCommunicate({			   				  
					  "attachFile": this.path.join(","),
					  "companyId": "string",
					  "content": this.content,
					  "createTime":new Date(),
					  "createUserId": "string",
					  "createUserName": "string",
					  "objId": otId,
					  "objType": otTypeId,
					  "processCommId": "string"	
			   }).then(res => {
				   if(res.success) {
					   this.$parent.reload()
					   return false
				   }
                   uni.showToast({
                       title: res.message,
                       duration: 2000
                   });
					   
			   })
		   }
	    }
	}
</script>

<style  lang="scss">
	.botton-btn-st{
		position: fixed;
		bottom: 20upx;
		width: 96%;
		left: 2%;
			
		}
	.communication-report-two {
		background-color: #fff;
		padding: 25upx;
		.text-area{
			border: 1px solid #eee;
			padding: 25upx;
			height: 150upx;
			font-size: 26upx;
		}

			.view-img{
				display: flex;
				margin-top: 40upx;
				.view-img-item{
					width: 20%;
					position: relative;
					img{
						width: 90%;
						margin-left: 5%;
					}
					.close-icon{
						width: 25%;
						position: absolute;
						top: -5%;
						right: -2%;
					}
				}
			}
			.view-audio{
				.view-audio-item{
					margin-top: 20upx;
					display: flex;
					align-items: center;
					&>view{
						padding: 10upx;
					}
					img{
						width: 30upx;
					}
				}
			}
			.server-view{
				display: flex;
				width: 100%;
				color: #999;
				margin-top: 80upx;
				text-align: center;
				border-bottom: 1px solid #eee;
				padding-bottom: 90upx;
				font-size: 26upx;
				.left{
					flex:1;
					 img{
					 	width: 50%;
					 }
				}
				.right{
					flex:1.5;
					img{
						width: 33%;
					}
				}
				.img-c{
				}
			}
	}
</style>
